<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import { message } from 'ant-design-vue';
import moment from "moment"
import * as echarts from 'echarts';

// 查询
const pageSize = ref(10);
const pageNo = ref(1)
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const queryParams = ref({
    startTime: "",
    endTime: "",
    orderNumberList: []
});
const barChartRef = ref(null);
const barOption = ref({});

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page
    pageSize.value = itemsPerPage
    axios.post('/MedicineOrderReport/getMedicineOrderReportPointRate', {}).then(({data}) => {
        items.value = data.data;
        totalItems.value = data.data.length;
        loading.value = false;
        setBarChart()
    })
}

function setBarChart() {
    var myChart = echarts.init(barChartRef.value);
    let dataA = []
    let dataB = []
    let totalA = 0
    let totalB = 0
    let nameList = []
    items.value.forEach(item => {
        nameList.push(item.supplierName)
        dataA.push(item.trueAmount)
        dataB.push(item.unAmount)
        totalA += item.trueAmount
        totalB += item.unAmount
    })
    barOption.value = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '7%',
            right: "5%",
            bottom: '5%',
            top: '5%'
        },
        legend: {
            formatter: function(name) {
                if(name == '已实返') {
                    return name + '  ' + totalA.toFixed(2) + '元'
                }
                if(name == '未实返') {
                    return name + '  ' + totalB.toFixed(2) + '元'
                }
            },
            textStyle: {
                fontSize: "14px"
            },
            itemGap: 80
        },
        xAxis: {
            type: 'category',
            data: nameList,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgb(177,213,249)'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: '14px'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#111',
                    fontSize: '14px'
                }
            }
        },
        series: [
            {
                data: dataA,
                type: 'bar',
                barWidth: '25px',
                stack: 'a',
                itemStyle: {
                    borderRadius: [0, 0, 30, 30],
                    color: 'rgb(94,184,255)'
                },
                name: "已实返"
            },
            {
                data: dataB,
                type: 'bar',
                barWidth: '25px',
                stack: 'a',
                itemStyle: {
                    borderRadius: [30, 30, 0, 0],
                    color: "rgb(54, 115, 232)"
                },
                name: "未实返"
            }
        ]
    };
    barOption && myChart.setOption(barOption.value);  
}

const selectList = ref([]);
const lineChartRef = ref([])
onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
    axios.post('/MedicineOrder/getMedicineOrderList', {
        page: 1,
        pageSize: 1000,
        orderNumber: "",
        startTime: "",
        endTime: ""
    }).then(({data}) => {
        selectList.value = data.data.records;
    })
});

const lineChartList = ref([]);
function getMedicineOrderReportPointChangeRate() {
    let obj = {
        orderNumberList: queryParams.value.orderNumberList
    }
    axios.post("/MedicineOrderReport/getMedicineOrderReportPointChangeRate", obj).then(res => {
        lineChartList.value = res.data.data
        lineChartList.value.forEach((k, i) => {
            lineChartRef.value[i] = null
            setTimeout(() => {
                setLineChart(k, i)
            })
        })
    })
}

function setLineChart(k, i) {
    let name = Object.keys(k)[0]
    let data = k[name]
    let option = {}
    let totalA = 0
    let totalB = 0
    data.forEach(item => {
        totalA += item.trueAmount
        totalB += item.unAmount
    })
    var myChart = echarts.init(document.getElementById('lineChartRef' + i))
    option.value = {
        title: {
            text: name
        },
        legend: {
            data: ['已实返', '未实返'],
            formatter: function(name) {
                if(name == '已实返') {
                    return name + '  ' + totalA.toFixed(2) + '元'
                }
                if(name == '未实返') {
                    return name + '  ' + totalB.toFixed(2) + '元'
                }
            },
            textStyle: {
                fontSize: "12px"
            },
            right: '20px'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '7%',
            right: "7%"
        },
        xAxis: {
            type: 'category',
            data: data.map(obj => obj.month)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data.map(obj => obj.trueAmount),
                type: 'line',
                symbol: 'none',
                areaStyle: {},
                name: "已实返"
            },
            {
                data: data.map(obj => obj.unAmount),
                type: 'line',
                symbol: 'none',
                areaStyle: {},
                name: "未实返"
            }
        ]
    }
    option && myChart.setOption(option.value);  
}

const filterOption = (input, option) => {
  return option.orderName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>

<template>
    <a-spin size="large" :spinning="loading">
        <a-card title="清单返点统计">
            <a-row style="margin-bottom: 25px;">
                <a-form
                layout="inline"
                :model="queryParams"
                :colon="false">
                    <a-form-item label="清单">
                        <a-select
                        v-model:value="queryParams.orderNumberList"
                        placeholder="选择清单（可多选）"
                        :filter-option="filterOption"
                        :options="selectList"
                        :fieldNames="{
                            label: 'orderName',
                            value: 'orderNumber'
                        }"
                        mode="multiple"
                        style="width: 200px;"></a-select>
                    </a-form-item>
                    <!-- <a-form-item label="开始时间">
                        <a-date-picker show-time v-model:value="queryParams.startTime" placeholder="开始时间"></a-date-picker>
                    </a-form-item>
                    <a-form-item label="结束时间">
                        <a-date-picker show-time v-model:value="queryParams.endTime" placeholder="结束时间"></a-date-picker>
                    </a-form-item> -->
                    <a-from-item>
                        <a-button @click="getMedicineOrderReportPointChangeRate">查询</a-button>
                    </a-from-item>
                </a-form>
            </a-row>
            <div class="lineChartContent">
                <div class="lineChart" v-for="(k, i) in lineChartList" :id="'lineChartRef' + i"></div>
            </div>
        </a-card>

        <a-card>
            <div class="barChart" ref="barChartRef"></div>
        </a-card>
    </a-spin>
</template>

<style scoped>
.lineChartContent {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
}
.lineChart {
    flex: 0 0 auto;
    width: 400px;
    height: 400px;
    margin-right: 15px;
}
.barChart {
    width: 100%;
    height: 400px;
}
</style>
